@import '../../common/common';
//@import '../../common/mixin';

.personal {
  button {
    color: #fff;
  }
  .userinfo__warp {
    position: relative;
    .title {
      @include hl(px2rem(85));
      @include sc(px2rem(26), #ffffff);
      text-align: center;
      position: relative;
    }
    .bg-box {
      @include bis('../../../imgs/my-bg.jpg');
      height: px2rem(450);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 0;
    }
    .avatar-name__warp {
      position: relative;
      margin-top: px2rem(13);
      .avatar {
        @include wh(px2rem(140), px2rem(140));
        margin: auto;
        border: px2rem(5) solid #fff;
        @include borderRadius();
        overflow: hidden;
      }
      .name {
        @include hl(px2rem(88));
        text-align: center;
        @include sc(px2rem(38), #FFF);
      }
    }
    .communication {
      background-color: #fff;
      margin-top: px2rem(100);
      padding: px2rem(20) 0;
      height: px2rem(180);
      @include fj();
      .phone,.wx-warp {
        @include flex();
        text-align: center;
        .icon {
          @include sc(px2rem(55), $color_b);
        }
        .number {
          @include sc(px2rem(22), #666666);
        }
        .text {
          @include sc(px2rem(22), #999999);
          @include hl(px2rem(48));
        }
      }
      .wx-warp {
        position: relative;
        @include border1px(left, #d7d7d7);
        .icon {
          color: $color_g;
        }
      }
    }
  }
  .weui-cells {
    font-size: px2rem(28);
    div {
      @include hl(px2rem(80));
    }
    .weui-cell__hd {
      margin-right: px2rem(24);
      i {
        font-size: px2rem(60);
        color: #4fa9fd;
      }
    }
    .weui-cell__bd {
      @include sc(px2rem(28), #666);
    }
    .weui-cell.weui-cell_access {
      .weui-cell__ft {
        padding-right: px2rem(45);
        line-height: px2rem(80);
        color: #999;
        &:after {
          height: px2rem(30);
          width: px2rem(30);
          margin-top: px2rem(-15);
          border-width: px2rem(6) px2rem(5) 0 0;
          border-color: #CCC;
        }
      }
    }
  }
  .bind-phone-wrap {
    div.wrap {
      margin-left: px2rem(30);
      margin-right: px2rem(30);
    }
    .phoneNumber, .code {
      input {
        width: 100%;
        border: 1px solid #ccc;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        border-radius: 4px;
        padding-left: px2rem(10);
      }
    }
    .code {
      position: relative;
      .code-input-wrap {
        padding-right: px2rem(240);
      }
      a {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        width: 3rem;
        line-height: 35px;
        background-color: $color_b;
        @include borderRadius(px2rem(5));
        text-align: center;
        color: #fff;
        &.disable {
          background-color: #ccc;
        }
      }
    }
    div+div {
      margin-top: px2rem(20);
    }
    div.bind {
      margin-top: px2rem(50);
      margin-bottom: px2rem(20);
      a {
        display: inline-block;
        font-size: px2rem(30);
        border: none;
        width: 100%;
        line-height: 35px;
        background-color: $color_b;
        @include borderRadius(px2rem(5));
        color: #fff;
        text-align: center;
      }
    }
  }
}
